<template>
  <div class="echarts-box">
    <div id="zzpicture" :style="{ width: '900px', height: '300px' }"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted} from "vue";
export default {

  setup() {
    onMounted(() => {
      initChart();
    });
    function initChart() {
      let chart = echarts.init(document.getElementById("zzpicture"));
      chart.setOption({
        xAxis: {
          type: "category",
          data: ["0-15", "15-30", "30-45", "45-60", "60-75", "75-90"],
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
        },
        series: [
          {
            data: [20, 40, 75, 100, 5, 83],
            type: "bar",
            legendHoverLink: true,
          },
        ],
      });

      window.onresize = () => {
        //自适应大小
        chart.resize();
      };
    }

    return { initChart };
  },
};
</script>

<style scoped>
</style>